import Layout from '@/components/Layouts';
import Tabs from '@/components/Tabs';
import { Card, Carousel, Col, Flex, Row } from 'antd';
import { Helmet, Link, useIntl, useModel } from 'umi';

import account from '@/assets/account.png';
import company from '@/assets/company.png';
import topPrev from '@/assets/home_toplefticon.png';
import topNext from '@/assets/home_toprighticon.png';
import house from '@/assets/house.png';
import mortgage from '@/assets/mortgage.png';
import next from '@/assets/next.png';
import pre from '@/assets/pre.png';
import privateImg from '@/assets/private.png';

import { findByCodeList, getHomeIndex } from '@/services/login';
import { useGetToken } from '@/utils/request';
import { useRequest } from 'ahooks';
import { useEffect } from 'react';

import { formatNumber, getNewUrl, jumpUrl } from '@/utils';
import ProductCard from './Card';
import './index.less';

const Home: React.FC = () => {
  const intl = useIntl();
  const { token } = useGetToken();
  const isEn = intl.locale == 'en-US';
  const { data: optionsList } = useRequest(() => {
    return findByCodeList({
      code: 'productKey,disburseAverageTime,productFeatureType,orderListStatus',
    });
  });
  const { user } = useModel('userModel');
  const { finishFillInfoDate } = user || {};
  useEffect(() => {
    if (token && finishFillInfoDate) {
      jumpUrl('/product');
    }
  }, [token, finishFillInfoDate]);
  const { data, loading, mutate } = useRequest(getHomeIndex);

  const productList = [
    {
      word: 'home.private',
      icon: privateImg,
      key: '1',
      color: '#0065FD',
    },
    {
      word: 'home.account',
      icon: account,
      key: '2',
      color: '#FD6A00',
      background: '#FD7900',
    },
    {
      word: 'home.house',
      icon: house,
      key: '3',
      color: '#09CEAB',
      background: '#06A663',
    },
    {
      word: 'home.loan',
      icon: mortgage,
      key: '4',
      color: '#1FCB45',
    },
    {
      word: 'home.company',
      icon: company,
      key: '5',
      color: '#CB1F1F',
    },
  ];
  const list = [
    [
      {
        height: 26,
        key: 1,
      },
      {
        height: 31,
        key: 2,
      },
      {
        height: 25,
        key: 3,
      },
      {
        height: 36,
        key: 4,
      },
      {
        height: 36,
        key: 5,
      },
      {
        height: 30,
        key: 6,
      },
      { height: 28, key: 7 },
      { height: 55, key: 8 },
      {
        height: 27,
        key: 13,
      },
      {
        height: 36,
        key: 10,
      },
      {
        height: 45,
        key: 11,
      },
      {
        height: 36,
        key: 12,
      },
    ],
    [
      {
        height: 31,
        key: 2,
      },
      {
        height: 25,
        key: 3,
      },
      {
        height: 36,
        key: 4,
      },
      { height: 28, key: 7 },
      {
        height: 30,
        key: 6,
      },

      {
        height: 36,
        key: 5,
      },

      {
        height: 45,
        key: 11,
      },
      {
        height: 36,
        key: 12,
      },
      {
        height: 27,
        key: 13,
      },
      {
        height: 46,
        key: 14,
      },
      {
        height: 51,
        key: 15,
      },
      {
        height: 36,
        key: 10,
      },
    ],
  ];
  const topSwiperList = [
    {
      width: 270,
      height: 270,
    },
    {
      width: 380,
      height: 290,
      right: 8,
      top: -64,
    },
    {
      width: 350,
      height: 350,
      right: 15,
      top: -75,
      val: (
        <span>
          HK$
          <span style={{ fontSize: isEn ? 30 : 50, fontWeight: 700 }}>
            {formatNumber(10000, false)}
          </span>
        </span>
      ),
    },
    {
      width: 280,
      height: 365,
      right: '0',
      top: -91,
    },
  ];
  const topList = [
    { id: '0', url: '/exclusive' },
    { id: '1', url: '/way' },
    { id: '2', url: '/firm' },
  ];

  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.meta_title' })}</title>
        <meta name="keywords" content={intl.formatMessage({ id: 'home.home_keywords' })} />
      </Helmet>
      <div className="home">
        <Layout
          fixed
          className="home_layout_bg"
          style={{
            backgroundSize: '100% 400px',
          }}
          content={
            <div>
              <Carousel
                nextArrow={<img src={topNext} />}
                prevArrow={<img src={topPrev} />}
                dots={false}
                autoplaySpeed={6000}
                className="home_top_swiper"
                arrows
                // autoplay
                infinite
              >
                {topSwiperList.map((item, index) => {
                  const { width, height, val, right, top } = item;
                  return (
                    <div key={height} style={{ width: '100vw' }}>
                      <div
                        className="common"
                        style={{ paddingBottom: isEn ? 90 : 120, position: 'relative' }}
                      >
                        <div style={{ margin: '70px 0 0 80px', width: 760 }}>
                          <div
                            className="home_title"
                            style={{
                              letterSpacing: isEn ? 0 : 1,
                              wordSpacing: '-2px',
                              fontSize: isEn ? 44 : 50,
                              lineHeight: isEn ? '44px' : 'auto',
                              marginBottom: isEn ? 15 : 0,
                            }}
                          >
                            {intl.formatMessage({ id: `home.index_word${index}` }, { num: val })}
                          </div>

                          <div
                            className="home_title_word"
                            style={{
                              fontSize: 30,
                              color: '#fff',
                              paddingBottom: 24,
                              lineHeight: isEn ? '30px' : '42px',
                            }}
                          >
                            {intl.formatMessage({ id: `home.index_words${index}` }, { num: val })}
                          </div>
                          <img
                            style={{
                              position: 'absolute',
                              right: right || 42,
                              top: top || -45,
                              zIndex: 10,
                            }}
                            width={width}
                            height={height}
                            src={require(`@/assets/home_swiper_bg${index + 1}.png`)}
                          />
                        </div>
                      </div>
                    </div>
                  );
                })}
              </Carousel>
            </div>
          }
        >
          <div className="common" style={{ position: 'absolute', bottom: -70 }}>
            <Tabs
              className="home_tabs"
              isHome
              onFinish={(value) => {
                jumpUrl('/product', { ...value });
              }}
              needBottomContent={false}
            />
          </div>
        </Layout>
        <Card bordered={false} className="home_content">
          <div className="common">
            <div style={{ fontSize: 26, fontWeight: 600, textAlign: 'center' }}>
              {intl.formatMessage({ id: 'home.index_cooperate' })}
            </div>
            <div style={{ fontSize: 26, fontWeight: 600, textAlign: 'center' }}>
              {intl.formatMessage({ id: 'home.index_cooperate2' })}
            </div>
            <Flex
              justify="space-between"
              className="home_content_items"
              style={{ margin: '30px 0 33px' }}
            >
              {topList.map((v) => {
                const { id: item, url } = v;
                const height = item == '0' ? '242' : item == '1' ? '236' : '237';
                return (
                  <div
                    key={item}
                    className="home_content_item"
                    style={{ zIndex: item == '1' ? 5 : 'auto' }}
                  >
                    <div className={`home_content_top home_content_top${item}`}>
                      <div
                        className="home_content_top_title"
                        style={{ marginBottom: item == '0' ? '0' : 6, fontSize: isEn ? 12 : 18 }}
                      >
                        {intl.formatMessage({ id: `home.top.title${item}` })}
                      </div>
                      <img
                        style={{ position: 'relative', zIndex: 2 }}
                        height={height}
                        src={require(`@/assets/home_toppeople${item}.png`)}
                      />
                    </div>
                    <div style={{ padding: '24px 21px 0' }}>
                      <div className="home_content_item_word" style={{ fontSize: isEn ? 15 : 20 }}>
                        {intl.formatMessage({ id: `home.top.word${item}` })}
                      </div>
                      <div className="home_content_item_des" style={{ fontSize: isEn ? 12 : 14 }}>
                        {intl.formatMessage({ id: `home.top.words${item}` })}
                      </div>
                      <Link to={getNewUrl(url)} className="home_content_item_know">
                        {intl.formatMessage({ id: `home.top.know` })}
                      </Link>
                    </div>
                  </div>
                );
              })}
            </Flex>
            {/* <div className="home_content_swiper">
              
              <Flex gap={18} justify="space-between">
                {bannerImgList.map((item, index) => {
                  return (
                    <div
                      key={item}
                      onClick={() => {
                        jumpUrl(item);
                      }}
                      style={{
                        backgroundImage: `url(${require(`@/assets/${isEn ? 'en_' : ''}banner${
                          index + 1
                        }.png`)}`,
                      }}
                      className="home_content_swiper_item"
                    />
                  );
                })}
              </Flex>
            </div> */}
            {/* 产品 */}

            <Row gutter={[0, 30]}>
              {productList?.map((item) => {
                const { color, key, icon, word, background } = item;

                return (
                  <Col span={24} key={key} className="home_content_product_item">
                    <Card
                      loading={loading}
                      bordered={false}
                      style={{
                        boxShadow: 'none',
                      }}
                      styles={{
                        body: {
                          padding: 0,
                          borderRadius: 0,
                        },
                      }}
                    >
                      <Col
                        className="home_content_product_bg"
                        style={{
                          background: `linear-gradient(to right,${
                            background || color
                          } 0%, #D9D9D9 8%, ${background || color} 100%)`,
                        }}
                      />

                      <Flex
                        align="center"
                        justify="space-between"
                        style={{ position: 'relative', zIndex: 2 }}
                      >
                        <Flex align="center" style={{ paddingBottom: 10 }}>
                          <Col
                            className="home_content_product_item_title"
                            style={{ background: color }}
                          >
                            <img width={20} src={icon} style={{ marginRight: 10 }} />
                            {intl.formatMessage({ id: word })}
                          </Col>
                        </Flex>
                        <Link to={getNewUrl(`/more?productType=${key}`)}>
                          <Flex
                            style={{
                              cursor: 'pointer',
                              fontSize: 15,
                              marginRight: 30,
                            }}
                            className="home_content_product_item_all"
                            align="center"
                          >
                            <div style={{ marginRight: 7 }}>
                              {intl.formatMessage({ id: 'home.show_all' })}
                            </div>
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path d="M16.6667 9.91699H2.5V10.7503H16.8333L14 13.5837L14.5833 14.167L18.3333 10.417L14.5833 6.66699L14 7.25033L16.6667 9.91699Z" />
                            </svg>
                          </Flex>
                        </Link>
                      </Flex>
                      {/* 卡片 */}
                      <Row
                        gutter={[0, 25]}
                        style={{
                          position: 'relative',
                          zIndex: 2,
                          backgroundColor: '#fff',
                        }}
                      >
                        {((data?.data && (data?.data[key] as Center.ProductList[])) || [])?.map(
                          (item: Center.ProductList, index: number) => {
                            return (
                              <ProductCard
                                mutate={mutate}
                                index={index}
                                item={item}
                                listIndex={key}
                                data={data}
                                key={item.id}
                                codeList={optionsList?.data || {}}
                              />
                            );
                          },
                        )}
                      </Row>
                    </Card>
                  </Col>
                );
              })}
            </Row>
          </div>
        </Card>

        {/* 底部 */}
        <div className="home_bottom common">
          <div className="home_bottom_title">
            {intl.formatMessage({ id: 'home.cooperation_company' })}
          </div>
          {/* <Row gutter={[20, 20]}>
          {new Array(11).fill(0).map((_, index) => {
            return (
              // eslint-disable-next-line react/no-array-index-key
              <Col span={4} key={index}>
                <div className="home_bottom_swiper_item_bg">
                  <img height={36} src={require(`@/assets/s${index + 1}.png`)} />
                </div>
              </Col>
            );
          })}
        </Row> */}
          <Carousel
            style={{ paddingBottom: 40 }}
            nextArrow={<img src={next} />}
            prevArrow={<img src={pre} />}
            dots={false}
            autoplaySpeed={1000}
            arrows
            infinite
          >
            {list.map((item, index) => {
              return (
                // eslint-disable-next-line react/no-array-index-key
                <div key={index} style={{ width: '100%' }}>
                  <Row gutter={[20, 20]}>
                    {item.map((v) => {
                      const { height, key } = v;
                      return (
                        <Col span={4} key={key}>
                          <div className="home_bottom_swiper_item_bg">
                            <img height={height} src={require(`@/assets/s${key}.png`)} />
                          </div>
                        </Col>
                      );
                    })}
                  </Row>
                </div>
              );
            })}
          </Carousel>
        </div>
        <div className="home_bottom_bg" />
      </div>
    </>
  );
};

export default Home;
